<template>
	<view>
		<view class="container">
			<view class="row" @tap="changeAvatar()">
				<view class="content">
					<text class="title">{{'头像('+(selecting_avatar==''?'待选)':'已选)')}}</text>
					<view class="avatar_container">
						<image  class="avatar" :src="selecting_avatar!=''?selecting_avatar:avatar"></image>
					</view>
					<text class="arrow">></text>
				</view>
			</view>
			<view class="row">
				<button class="btn danger" @tap="cancel()">取消</button>
				<button class="btn" @tap="uploadAvatar()">上传</button>
			</view>
		
		</view>	
	</view>
</template>

<script>
	import URL from '../../api/url.js';
	import {mapGetters,mapActions} from 'vuex';
	import {updateUserInfo} from 'api/user';
	export default {
		data() {
			return {
				avatar:this.$store.getters.avatar,
				selecting_avatar: ''
			}
		},
		onLoad() {
			//this.changeAvatar();
		},
		//通过计算属性可以读取并实时监听状态的变化
		computed: {
		  
		},
		methods: {
			...mapActions(['updateAvatar']),
			///头像
			changeAvatar: function() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						that.selecting_avatar = res.tempFilePaths[0];
						console.log(that.selecting_avatar)
					}
				});
			},
			 uploadAvatar(){
				if(this.selecting_avatar==''){
					uni.showToast({
						title:'请选择图片',
						icon:'none',
						duration:1000
					});
					return;
				}
				let that = this;
				uni.showLoading({
					title:'正在上传',
				})
			    uni.uploadFile({
							 url: URL.getImageUrl()+'/uploadWithName',
						     filePath: that.selecting_avatar,
						     name: 'image',
						     formData: {
								 password:URL.getImagePassword(),
								 imageName:'avatar-of-user-'+that.$store.getters.user.id, //图片命名
						         image: that.selecting_avatar
						     },
						     success: response => {
						         let res = JSON.parse(response.data);
						         if (res.code == 200) {
										uni.hideLoading();
										let url = URL.getImageUrl()+'/images/'+res.content.url;
										that.updateAvatar(url);
										that.selecting_avatar = url;
										
										//更新到数据库
										updateUserInfo({
											token:that.$store.getters.token,
											avatar:url
										});
										
				                        uni.hideLoading();
										uni.showToast({
				                        	title:'上传成功！',
											icon:'success',
											mask:false,
											duration:2000
				                        });								
				                    }else{
										uni.hideLoading();
										uni.showToast({
											title:res.message,
											icon:'error'
										})
									}
				                },
				                fail: err => {
				                    uni.hideLoading()
				                    console.log('请求失败_______________', err);
				                }
				});
			},
			cancel(){
				uni.navigateBack({
					animationType:'slide-out-left',
				})
			}
		}
	}
</script>

<style scoped>
	.container{
		padding-top: 20rpx;
		/* display: flex; */
		align-items: center;
		justify-content: center;
	}
	.title{
		margin: auto;
		margin-left: 15rpx;
		color: #8F8F94;
		font-size: 100%;
		font-weight: 600;
	}
	.arrow{
		margin-top: auto;
		margin-bottom: auto;
		color: #8F8F94;
		margin-right: 5rpx;
		margin-left: 20rpx;
		font-weight: 600;
	}
	.avatar_container{
		margin-left: auto;
		margin-right: 0;
	}
	.avatar{
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
	}
	.row{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.row .content{
		line-height: 120rpx;
		width: 90%;
		float: left;
		display: flex;
		border-bottom-color: #C8C7CC;
		border-bottom-style: inset;
	}
	.btn{
		color: white;
		margin-top: 30rpx;
		background-color: #4CD964;
	}
	.danger{
		background-color: #d94b4d;
	}
</style>
